<template>
	<view>
		<view class="progress" :style="{ width: width + 'rpx', height: width + 'rpx' }">
			<view class="progress__bar"
				:style="{ background: `conic-gradient(  ${activeColor} ${shorterProgress}%, ${inactiveColor} ${shorterProgress}% 100%)` }"
				id="progress__bar"></view>
			<view class="circle" id="circle"
				:style="{ width: 'calc(100% - ' + borderWidth * 2 + 'rpx)', height: 'calc(100% - ' + borderWidth * 2 + 'rpx)', background: bgColor }">
			</view>
			<view v-if="progress > 0" class="circle1"
				:style="{ width: borderWidth + 'rpx', height: borderWidth + 'rpx', background: activeColor }">
			</view>
			<view v-if="progress > 0" class="circle2"
				:style="{ transform: `translateX(-50%) rotate(${(shorterProgress) * 3.6}deg)`, width: borderWidth + 'rpx' }">
				<view class="circle2-r"
					:style="{ width: borderWidth + 'rpx', height: borderWidth + 'rpx', background: activeColor }">
				</view>
			</view>
			<span class="progress__value" v-show="showValue"
				:style="{ color: valueColor, fontSize: (valueFontSize + 'rpx'), fontWeight: valueFontWeight }">{{
					showProgress
				}}{{ unit }}</span>
		</view>
	</view>
</template>
<script>

export default {
	props: {
		activeColor: {
			default: '#009dff',
			type: String
		},
		unit: {
			default: '',
			type: String
		},
		showValue: {
			default: false,
			type: Boolean
		},
		valueColor: {
			default: '#009dff',
			type: String
		},
		valueFontWeight: {
			default: 600,
			type: [Number, String]
		},
		valueFontSize: {
			default: 18,
			type: [Number, String]
		},
		inactiveColor: {
			default: '#ececec',
			type: String
		},
		bgColor: {
			default: '#ffffff',
			type: String
		},
		duration: {
			default: 600,
			type:  [Number, String]
		},
		progress: {
			default: 0,
			type: [Number, String]
		},
		width: {
			default: 400,
			type:  [Number, String]
		},
		borderWidth: {
			default: 20,
			type:  [Number, String]
		},
	},
	data() {
		return {
			currentValue: 0,
			startTime: 0,
			inter: null,
			refreshInterval: 30
		};
	},
	watch: {
		progress() {
			this.startCount();
		}
	},
	computed: {
		roundProgress() {
			return 1 - (this.borderWidth / (this.width * Math.PI))
		},
		shorterProgress() {
			if (this.showProgress < 100) {
				return (this.showProgress * this.roundProgress).toFixed(2)
			} else {
				return 100
			}
		},
		showProgress() {
			if (this.currentValue < this.progress) {
				return Math.floor(this.currentValue)
			} else if (Math.floor(this.progress) === this.progress) {
				return this.progress
			} else {
				return Math.floor(this.progress * 100) / 100
			}
		}
	},
	created() {
		if (this.progress > 0) {
			this.startCount();
		}
	},
	methods: {
		startCount() {
			if (this.duration > 0) {
				this.startTime = this.progress / (this.duration / this.refreshInterval);
				this.currentValue = 0;
				this.inter && clearTimeout(this.inter);
				this.inter = null;
				this.updateValue();
			} else {
				this.currentValue = this.progress;
			}

		},
		updateValue() {
			if (this.currentValue < this.progress) {
				this.inter = setTimeout(() => {
					this.currentValue += this.startTime;
					this.updateValue();
				}, this.refreshInterval);
			} else {
				// this.$emit('done', this.progress)
			}
		},

	}
};
</script>

<style lang="less" scoped>
.progress {
	position: relative;
	color: #000;

	.circle {
		position: absolute;
		width: 80%;
		height: 80%;
		left: 50%;
		top: 50%;
		background: #fff;
		transform: translateX(-50%) translateY(-50%);
		border-radius: 50%;
		z-index: 99;
		transition: 0.2s;

		&.done {
			width: 0%;
			height: 0%;
		}
	}

	.circle1 {
		position: absolute;
		border-radius: 50%;
	}

	.circle2 {
		height: 100%;
		left: 50%;
		position: absolute;
		border-radius: 50%;

		.circle2-r {
			position: absolute;
			top: 0;
			left: 0;
			border-radius: 50%;
		}
	}

	.circle1 {
		top: 0;
		left: 50%;
		transform: translateX(-50%);
	}
}

.progress__bar {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background-size: contain;
	background-origin: border-box;
	background-clip: content-box;
	transition: 0.5s ease-out;
	/* mask: radial-gradient(transparent, transparent 59.5%, #fff 40.5%, #fff 0); */

	&.done {
		background: #34d190 !important;

		&.fail {
			background: #ff4a32 !important;
		}
	}
}

.progress__value {
	position: absolute;
	top: 50%;
	left: 50%;
	white-space: nowrap;
	transform: translate(-50%, -50%);
	font-size: 24px;
	z-index: 999;
}
</style>
